<template>
  <div style="float: left;margin-top: 5px">
    <el-form ref="searchRef" :model="searchFormData">
      <el-form-item label="名称" style="float: left" >
        <el-input  type="text" v-model="searchFormData.name"></el-input>
      </el-form-item>
      <el-form-item label="标签"  style="float: left;margin-left: 5px" >
        <el-input  type="text" v-model="searchFormData.tag"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div style="height: 40px;margin-top: 5px;float: left;margin-left: 20px;">
    <el-button @click="searchClick">查询</el-button>
    <el-button @click="resetSearchClick">重置</el-button>
    <el-button  @click="addClick">新增</el-button>
  </div>
  <div style="clear: both"></div>
  <div style="height: calc(100% - 60px);">
    <Table  :show-page="true" ref="tableRef" :show-line-number="true"
            :showCheckBox="false" :url="tableUrl" :columns="columns">
      <template  v-slot:handle="slotProps">
        <el-button v-if="slotProps.rowData.pushStatus != 1" @click.stop="editTableData(slotProps.rowData,slotProps.rowIndex)">编辑</el-button>
        <el-button  @click.stop="deleteTableRowData(slotProps.rowData,slotProps.rowIndex)">删除</el-button>
        <el-button v-if="slotProps.rowData.pushStatus != 1" @click.stop="pushImageToSftp(slotProps.rowData,slotProps.rowIndex)">推送</el-button>
      </template>
    </Table>
  </div>
  <DialogForm width="500px" ref="editFormRef" :form="settingForm" title="编辑" @validateSuccess="validateSuccess" :data-change="dataChange">
      <template v-slot:uploadFile="slotProps">
          <el-button @click="openFileUploadDialog">上传</el-button>
      </template>
  </DialogForm>

<teleport to="body">
  <FileUpload ref="uploadImageRef" :choice-way="ChoiceWay.FILE" upload-file-num="1" suffix="tar" :upload-success="uploadSuccess">

  </FileUpload>
</teleport>

</template>

<script setup>

import Table from "@/components/plugs/table/Table.vue";
import DialogForm from "@/components/plugs/form/DialogForm.vue";
import {inject, reactive, ref, toRaw} from "vue";
import {FormItemType} from "@/components/plugs/form/DialogFormInterface.js";
import {AXIOS_NAME} from "@/constant/constant.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteRow, HandleEnum} from "@/utils/utils.ts";
import FileUpload from "@/components/plugs/upload/FileUpload.vue";
import {ChoiceWay} from "@/components/plugs/upload/UploadInterface.js";
import {UploadConstants} from "@/components/plugs/upload/UploadConstants.js";
import {isEmpty} from "lodash";

const uploadImageRef = ref(null);
const tableRef = ref(null);
const $axios = inject(AXIOS_NAME);
const searchRef = ref(null);
const editFormRef = ref(null);
const tableUrl = ref("/images/getImagePage");

const searchFormData = reactive({
  'name': '',
  'tag': ''
});

const columns = [
  {field:"name","desc": "镜像名称"},
  {field:"tag","desc": "标签"},
  {field:"imageType","desc": "镜像类型",dicType: "image_type"},
  {field:"warehouseAddress","desc": "仓库地址"},
  {field:"loginUserName","desc": "登陆名称"},
  {field:"loginPassword","desc": "登陆密码"},
  {field:"pushStatus","desc": "是否同步到服务器",dicType:'push_state'},
  {field:"fileSize","desc": "镜像大小"},
  {field:"imageId","desc": "镜像ID"},
  {field:"showTime","desc": "创建时间",width: 200},
  {field:"handle","desc": "操作",isSlot:true,width:250}
];

let items = [];
items.push({type: FormItemType.INPUT_HIDDEN,label: 'id',name: 'id'});
items.push({type:FormItemType.DIC_SELECT,label: '镜像类型',name: 'imageType',dicType:"image_type",defaultValue:"1"});
items.push({type:FormItemType.INPUT_TEXT,label: '镜像名称',name: 'name'});
items.push({type:FormItemType.INPUT_TEXT,label: '镜像标签',name: 'tag'});
items.push({type:FormItemType.INPUT_TEXT,label: '仓库地址',name: 'warehouseAddress'});
items.push({type:FormItemType.INPUT_TEXT,label: '登陆名称',name: 'loginUserName'});
items.push({type:FormItemType.INPUT_TEXT,label: '登陆密码',name: 'loginPassword'});
items.push({type:FormItemType.SLOT,label: '文件上传',name: 'uploadFile'});
items.push({type:FormItemType.INPUT_HIDDEN,label: '文件大小',name: 'fileSize'});
items.push({type:FormItemType.INPUT_HIDDEN,label: '文件地址',name: 'filePath'});
items.push({type:FormItemType.INPUT_HIDDEN,label: '推送状态',name: 'pushStatus'});
let settingForm = reactive({
  splitCol: 1,
  gutter: 20,
  labelWidth: 115,
  items:items,
  rules:{
    name: [
      { required: true, message: '请填写镜像名称', trigger: 'blur' }
    ],
    tag: [
      { required: true, message: '请填写镜像标签', trigger: 'blur' }
    ],
    warehouseAddress: [
      { required: true, message: '请填写仓库地址', trigger: 'blur' }
    ],
    loginUserName: [
      { required: true, message: '请填写仓库登陆名', trigger: 'blur' }
    ],
    loginPassword: [
      { required: true, message: '请填写仓库登陆密码', trigger: 'blur' }
    ]
  },
});

const searchClick = () =>{
  tableRef.value.reload(toRaw(searchFormData));
}

const resetSearchClick = () =>{
  for(const  key in searchFormData){
    searchFormData[key] = '';
  }
}

const addClick = () =>{
  editFormRef.value.show();
  editFormRef.value.triggerField(["uploadFile"],false);
}

const editTableData = (rowData,rowIndex) =>{
  editFormRef.value.show();
  editFormRef.value.setData(rowData);
}

const pushImageToSftp = (rowData,rowIndex) =>{
  ElMessageBox.confirm(
      '是否推送镜像到服务器?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    $axios.post("/images/pushImages",rowData).then(response => {
      ElMessage.info(response.data.msg);
      if(response.data.code == 1){
        tableRef.value.reload();
      }
    });
  });
}

const deleteTableRowData = (rowData,rowIndex) =>{
  deleteRow('/images/delete',rowData,function (state,data){
    if(state == HandleEnum.SUCCESS){
      tableRef.value.reload();
    }
  });
}

const validateSuccess = (data) =>{
  if(isEmpty(data.filePath) && data.imageType == '2'){
    ElMessage.error("请上传镜像文件!");
    return;
  }
  if(isEmpty(data.pushStatus)){
    data.pushStatus = '0';
  }
  $axios.post('/images/addOrUpdate',data).then(response => {
    const data = response.data;
    if(data.code == 1){
      tableRef.value.reload();
      editFormRef.value.close();
      ElMessage.info("操作成功！");
      return;
    }
    ElMessage.error(data.msg);
  },error =>{

  });
}

const openFileUploadDialog = () =>{
  uploadImageRef.value.show();
}

const uploadSuccess = (state, data) =>{
  editFormRef.value.setData({
    "filePath": data[0].filePath,
    "fileSize": data[0].fileSize
  });
  uploadImageRef.value.hide();
}

const dataChange = (oldValue, newValue, field) => {
  if(field != 'imageType'){
    return;
  }
  if('1' == newValue){
    editFormRef.value.triggerField(["uploadFile"],false);
    editFormRef.value.triggerField(["loginUserName","loginPassword","warehouseAddress"],true);
    return;
  }
  editFormRef.value.triggerField(["uploadFile"],true);
  editFormRef.value.triggerField(["loginUserName","loginPassword","warehouseAddress"],false);
}
</script>

<style scoped>

</style>